$panel-index-view-search: (
  'bg-color': getCssVar(color, bg, 5),
  'text-color': getCssVar(color, text, 0),
  'btn-width': getCssVar('height-control', 'large'),
  'placeholder-text-color': getCssVar(color, text, 5),
  padding: getCssVar(spacing, tight) getCssVar(spacing, base),
);

@include b(panel-index-view-search) {
  @include set-component-css-var('panel-index-view-search', $panel-index-view-search);

  width: 100%;
  height: 100%;
  padding: getCssVar(panel-index-view-search, padding);;

  .el-input__wrapper{
    background-color: getCssVar(panel-index-view-search, bg-color);
    box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;

    .el-input__prefix{
      color: getCssVar(panel-index-view-search, text-color);
    }

    .el-input__inner{
      color: getCssVar(panel-index-view-search, text-color);

      &::placeholder{
        color: getCssVar(panel-index-view-search, placeholder-text-color);
      }
    }
  }  
  @include when(collapse) {
    padding: 0;
  }
}

@include b(panel-index-view-search-btn){
  padding: 0 getCssVar(spacing, tight);
  font-size: getCssVar(font-size, header-4);

  .el-button{
    width: getCssVar(panel-index-view-search, btn-width);
    padding: getCssVar(spacing, base-tight);
  }

  &:hover {
    background-color: transparent;
  }
}
